
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/png" href="https://highlightjs.org/static/favicon.png" />
  <title>highlight.js中文网</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
  <script src="https://fenxianglu.cn/vendor/vue.min.js"></script>
  <script src="https://fenxianglu.cn/vendor/jquery.min.js"></script>
  <style type="text/css">
    body,dd,dl,dt,p{padding:0;margin:0}
    body{padding-top: 60px;font-size:14px;color:#333}
    dd strong{display:inline-block;padding:2px 5px;color:#e74c3c;border:solid 1px #e1e4e5;font-size:12px;font-weight:400}
    dd{margin-top:10px}
    dl{margin-top:15px}
    h2{margin-top:0;font-weight:400}
    h3{padding:2px 5px;color:#e74c3c;border:solid 1px #e1e4e5;font-weight:400}
    p{margin-top:15px}
    a{text-decoration: none;color: inherit;}
    [v-cloak]{display:none}
    .zh-api{-webkit-box-flex:2;-ms-flex:2;flex:2;width: 0;height:calc(100vh - 90px);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto}
    .zh-aside{-webkit-box-flex:1;-ms-flex:1;flex:1;width: 0;}
    .zh-header{position: fixed;left: 0;right: 0;top: 0;height:60px;padding:0 20px;background:-o-linear-gradient(45deg,#f56c6c,#e6a23c);background:linear-gradient(45deg,#f56c6c,#e6a23c);line-height:60px;font-size:20px;color:#fff}
    .zh-list{margin-top:10px;height:calc(100vh - 163px);overflow:auto}
    .zh-main{-webkit-box-flex:2;-ms-flex:2;flex:2;width: 0;padding:0 15px;margin:0 15px;border-left:1px solid #e1e4e5;border-right:1px solid #e1e4e5;overflow:auto}
    .zh-page{display:-webkit-box;display:-ms-flexbox;display:flex;min-width: 970px;padding:15px;height:calc(100vh - 60px);-webkit-box-sizing:border-box;box-sizing:border-box}
    .zh-radio label{margin-left:5px;white-space: nowrap;cursor:pointer}
    .zh-radio{display:-webkit-box;display:-ms-flexbox;display:flex;padding:2px 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
    pre{white-space: pre-wrap;word-break: break-all;}
    .zh-header .zh-link{float: right;margin-left: 15px;font-size: 14px;}
    .zh-header .zh-link:hover{color: #fff;}
    .zh-link:hover{color: #e74c3c;text-decoration: underline;}
    .zh-api .zh-link{text-decoration: underline;}
    .adsbygoogle{max-width: 100%;margin-top: 15px;}
  </style>
    <link rel="stylesheet" id="theme-link">
</head>

<body>
<div class="zh-header">
  highlight.js中文网
  <a class="zh-link" target="_blank" href="mailto:443343203@qq.com">443343203@qq.com</a>
  <a class="zh-link" target="_blank" href="https://turfjs.fenxianglu.cn">Turf.js中文网</a>
  <a class="zh-link" target="_blank" href="https://dayjs.fenxianglu.cn">Day.js中文网</a>
  <a class="zh-link" target="_blank" href="https://ziti.fenxianglu.cn">免费字体</a>
  <a class="zh-link" target="_blank" href="https://image.fenxianglu.cn">美女壁纸</a>
  <a class="zh-link" target="_blank" href="https://www.fenxianglu.cn">技术开发分享录</a>
</div>
<div class="zh-page" id="js_app" v-cloak>
  <div class="zh-aside">
    <h2>主题</h2>
    <p>当前主题：<strong>{{ theme.value }}</strong></p>
    <div class="zh-list">
      <fieldset v-for="(v,k) in cThemeList" :key="k">
        <legend>{{ k }}</legend>
        <div class="zh-radio" :id="v2" v-for="(v2,i2) in v" :key="k+i2">
          <input :id="k+i2" type="radio" :value="v2" v-model="theme.value" @change="switchTheme(v2)">
          <label :for="k+i2">{{ v2 }}</label>
        </div>
      </fieldset>
    </div>
  </div>
  <div class="zh-main">
    <h2>示例</h2>
      <select name="" id="" @change="changeTheme($event)">
          <option v-for="lang in theme.list" :value="lang" :selected="theme.value==lang">{{lang}}</option>
      </select>
    <pre><code class="html">&lt;div class="zh-title"&gt;
    &lt;strong&gt;Hello World！&lt;/strong&gt;
&lt;div&gt;</code></pre>
    <pre><code>function foo() {
    var str = 'Hello World !';
    console.log(str);
}</code></pre>
    <strong>使用时引入初始化即可</strong>
    <pre><code>&lt;link rel="stylesheet" href="https://ziyuan.fenxianglu.cn/js/highlight/styles/default.css"&gt;
&lt;script src="https://ziyuan.fenxianglu.cn/js/highlight/highlight.pack.js"&gt;&lt;/script&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;</code></pre>
    <strong>注意</strong>
    <p>在高亮HTML标签的时候，需要把<和>改成＆lt;和＆gt;</p>
    <ins class="adsbygoogle"
         style="display:block; text-align:center;"
         data-ad-layout="in-article"
         data-ad-format="fluid"
         data-ad-client="ca-pub-3955044083622262"
         data-ad-slot="3507321357"></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
  <div class="zh-api">
    <h2>API文档</h2>
    <p>官方链接：<a class="zh-link" href="https://highlightjs.org/" target="_blank">https://highlightjs.org/</a></p>
    <p>官方下载：<a class="zh-link" href="https://highlightjs.org/download/" target="_blank">https://highlightjs.org/download/</a></p>
    <p>起步使用：<a class="zh-link" href="https://highlightjs.org/usage/" target="_blank">https://highlightjs.org/usage/</a></p>
    <p>官方文档：<a class="zh-link" href="https://highlightjs.readthedocs.io/en/latest/index.html" target="_blank">https://highlightjs.readthedocs.io/en/latest/index.html</a></p>
    <h3>highlight(languageName, code, ignore_illegals, continuation)</h3>
    <p>highighting核心函数，接受一个语言名称或一个别名和字符串去高亮代码。当ignore_illegals参数为true时，即使在检测到该语言的非法语法时，也会强制高亮，不抛出异常。continuation是一个可选参数，表示未完成的解析。当存在时，函数将从这个状态重新开始解析，而不是初始化一个新的状态。这在内部用于子语言支持。</p>
    <p>注意:continuation不支持逐行高亮显示，因为文法不需要以任何特殊方式处理换行符。语法很可能有一个单一的模式/正则表达式同时匹配多个行。这一点完全取决于语法。</p>
    <dl>
      <dt>返回具有以下属性的对象:</dt>
      <dd><strong>language</strong>：返回的语言名称与在languageName中传递的名称相同，以保持与highlightAuto的一致性</dd>
      <dd><strong>relevance</strong>：表示相关性得分的整数值</dd>
      <dd><strong>value</strong>：高亮显示标记的HTML字符串</dd>
      <dd><strong>top</strong>：当前模式的顶部</dd>
      <dd><strong>illegal</strong>：表示是否发现任何非法匹配的布尔值</dd>
      <dd><strong>code</strong>：原始代码</dd>
    </dl>
    <h3>highlightAuto(code, languageSubset)</h3>
    <p>高亮显示与语言检测。接收一个带有要高亮的代码的字符串，以及一个可选的语言名称和别名数组，该数组将检测限制为仅针对这些语言。还可以使用configure设置该子集，但是如果设置了该选项，则local参数将覆盖该选项。</p>
    <dl>
      <dt>返回具有以下属性的对象:</dt>
      <dd><strong>language</strong>：检测到的语言</dd>
      <dd><strong>relevance</strong>：表示相关性得分的整数值</dd>
      <dd><strong>value</strong>：高亮显示HTML标记字符串</dd>
      <dd><strong>second_best</strong>：具有第二最佳启发式检测语言相同结构的对象(可能不存在)</dd>
    </dl>
    <h3>fixMarkup(value)</h3>
    <p>后处理高亮标记。目前包括替换缩进制表符和使用<br>标签代替换行字符。使用configure全局设置选项。</p>
    <p>接受带有高亮标记的字符串。</p>
    <h3>highlightBlock(block)</h3>
    <p>对包含代码的DOM节点应用高亮显示。</p>
    <p>这个函数用于在页面加载后或在第三方Javascript框架的初始化代码中动态的应用高亮显示。</p>
    <p>默认情况下，该函数使用语言检测，但是可以在DOM节点的class属性中指定语言。有关所有可用的语言名称和别名，请参阅类引用。</p>
    <h3>configure(options)</h3>
    <dl>
      <dt>全局配置选项:</dt>
      <dd><strong>tabReplace</strong>：在缩进中用于替换制表符的字符串。</dd>
      <dd><strong>useBR</strong>：用于在输出中生成&lt;br&gt;标记而不是换行字符的标志，在使用非&lt;pre&gt;容器标记代码时非常有用。</dd>
      <dd><strong>classPrefix</strong>：在生成的标记中，在类名之前添加的字符串前缀，用于与样式表向后兼容。</dd>
      <dd><strong>languages</strong>：一组语言名称和别名，限制自动检测仅针对这些语言。</dd>
      <dd><strong>languageDetectRe</strong>： 一个正则表达式，用于配置CSS类名如何映射到语言(允许类名如color-as-php vs . language-php等)。</dd>
      <dd><strong>noHighlightRe</strong>：用于配置要完全跳过哪些CSS类的正则表达式。</dd>
    </dl>
    <p>接受表示要更新的值的选项的对象。其他选项不会改变</p>
    <pre><code>hljs.configure({
  tabReplace: '    ', // 4 spaces
  classPrefix: ''     // don't append class prefix
                      // … other options aren't changed
});
hljs.initHighlighting();</code></pre>
    <h3>initHighlighting()</h3>
    <p>应用高亮显示到所有&lt;pre&gt;&lt;code&gt;…&lt;/code&gt;&lt;/pre&gt;块在一个页面上。</p>
    <h3>initHighlightingOnLoad()</h3>
    <p>将高亮显示附加到页面加载事件。</p>
    <h3>registerLanguage(languageName, languageDefinition)</h3>
    <dl>
      <dt>将新语言添加到指定名称下的库中。主要是在内部使用。</dt>
      <dd><strong>languageName</strong>：一个包含被注册语言名称的字符串</dd>
      <dd><strong>languageDefinition</strong>：返回表示语言定义的对象的函数。函数被传递给hljs对象，以便能够使用其中定义的公共正则表达式。</dd>
    </dl>
    <h3>registerAliases(alias|aliases, {languageName})</h3>
    <dl>
      <dt>为在languageName键下定义的指定语言名称向库添加新的语言别名或别名</dt>
      <dd><strong>alias|aliases</strong>：注册了别名名称的字符串或数组</dd>
      <dd><strong>languageName</strong>：由registerLanguage指定的语言名称。</dd>
    </dl>
    <h3>listLanguages()</h3>
    <p>返回语言名称列表。</p>
    <h3>getLanguage(name)</h3>
    <p>按名称或别名查找一种语言。</p>
    <p>如果找到，返回语言对象，否则未定义。</p>
    <h3>requireLanguage(name)</h3>
    <p>按名称或别名查找一种语言。</p>
    <p>当一种语言的定义依赖于另一种语言时，应该使用这种方法。使用这个函数(vs getLanguage)将在缺少所需语言时提供更好的错误消息。</p>
    <p>返回语言对象，否则引发一个硬错误。</p>
    <h3>debugMode()</h3>
    <p>使调试/开发模式。这种模式故意使Highlight.js更脆弱!它只能用于测试和本地开发(语言或库本身)。默认使用“安全模式”，为生产使用提供最可靠的经验。</p>
    <dl>
      <dt>例如，如果一个新版本突然有一个严重的错误(或破坏性的更改)，只影响单一语言:</dt>
      <dd><strong>In Safe Mode</strong>：所有其他语言都会继续突出显示。破碎的语言将以代码块的形式出现，但是没有任何高亮显示(就像它是纯文本一样)。</dd>
      <dd><strong>In Debug Mode</strong>：当遇到错误时，所有的高亮显示都将停止，并抛出一个JavaScript错误。</dd>
    </dl>
  </div>
</div>
<script src="https://www.fenxianglu.cn/build/js/inject.js"></script>
<script type="text/javascript">
    var repo = 'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/';
    var dict = {
        'a11y-dark':repo+'styles/a11y-dark.min.css',
        'a11y-light':repo+'styles/a11y-light.min.css',
        'agate':repo+'styles/agate.min.css',
        'androidstudio':repo+'styles/androidstudio.min.css',
        'an-old-hope':repo+'styles/an-old-hope.min.css',
        'arduino-light':repo+'styles/arduino-light.min.css',
        'arta':repo+'styles/arta.min.css',
        'ascetic':repo+'styles/ascetic.min.css',
        'atelier-cave-light':repo+'styles/base16/atelier-cave-light.min.css',
        'atelier-dune-light':repo+'styles/base16/atelier-dune-light.min.css',
        'atelier-estuary-light':repo+'styles/base16/atelier-estuary-light.min.css',
        'atelier-forest-light':repo+'styles/base16/atelier-forest-light.min.css',
        'atelier-heath-dark':repo+'styles/base16/atelier-heath-light.min.css',
        'atelier-heath-light':repo+'styles/base16/atelier-heath-light.min.css',
        'atelier-lakeside-light':repo+'styles/base16/atelier-lakeside-light.min.css',
        'atelier-plateau-light':repo+'styles/base16/atelier-plateau-light.min.css',
        'atelier-savanna-light':repo+'styles/base16/atelier-savanna-light.min.css',
        'atelier-seaside-light':repo+'styles/base16/atelier-seaside-light.min.css',
        'atelier-sulphurpool-light':repo+'styles/base16/atelier-sulphurpool-light.min.css',
        'atom-one-dark':repo+'styles/atom-one-dark.min.css',
        'atom-one-dark-reasonable':repo+'styles/atom-one-dark-reasonable.min.css',
        'atom-one-light':repo+'styles/atom-one-light.min.css',
        'brown-paper':repo+'styles/brown-paper.min.css',
        'codepen-embed':repo+'styles/codepen-embed.min.css',
        'color-brewer':repo+'styles/color-brewer.min.css',
        'darcula':repo+'styles/base16/darcula.min.css',
        'dark':repo+'styles/dark.min.css',
        'default':repo+'styles/default.min.css',
        'docco':repo+'styles/docco.min.css',
        'dracula':repo+'styles/base16/dracula.min.css',
        'far':repo+'styles/far.min.css',
        'foundation':repo+'styles/foundation.min.css',
        'github':repo+'styles/base16/github.min.css',
        'gml':repo+'styles/gml.min.css',
        'googlecode':repo+'styles/googlecode.min.css',
        'gradient-dark':repo+'styles/gradient-dark.min.css',
        'grayscale':repo+'styles/grayscale.min.css',
        'gruvbox-dark-hard':repo+'styles/base16/gruvbox-dark-hard.min.css',
        'gruvbox-dark-medium':repo+'styles/base16/gruvbox-dark-medium.min.css',
        'gruvbox-dark-pale':repo+'styles/base16/gruvbox-dark-pale.min.css',
        'gruvbox-dark-soft':repo+'styles/base16/gruvbox-dark-soft.min.css',
        'gruvbox-light-hard':repo+'styles/base16/gruvbox-light-hard.min.css',
        'gruvbox-light-medium':repo+'styles/base16/gruvbox-light-medium.min.css',
        'gruvbox-light-soft':repo+'styles/base16/gruvbox-light-soft.min.css',
        'hopscotch':repo+'styles/base16/hopscotch.min.css',
        'hybrid':repo+'styles/hybrid.min.css',
        'idea':repo+'styles/idea.min.css',
        'ir-black':repo+'styles/base16/ir-black.min.css',
        'isbl-editor-dark':repo+'styles/isbl-editor-dark.min.css',
        'isbl-editor-light':repo+'styles/isbl-editor-light.min.css',
        'lightfair':repo+'styles/lightfair.min.css',
        'lioshi':repo+'styles/lioshi.min.css',
        'magula':repo+'styles/magula.min.css',
        'mono-blue':repo+'styles/mono-blue.min.css',
        'monokai':repo+'styles/base16/monokai.min.css',
        'monokai-sublime':repo+'styles/monokai-sublime.min.css',
        'night-owl':repo+'styles/night-owl.min.css',
        'nnfx-light':repo+'styles/nnfx-light.min.css',
        'nnfx-dark':repo+'styles/nnfx-dark.min.css',
        'nord':repo+'styles/base16/nord.min.css',
        'obsidian':repo+'styles/obsidian.min.css',
        'ocean':repo+'styles/base16/ocean.min.css',
        'paraiso-dark':repo+'styles/paraiso-dark.min.css',
        'paraiso-light':repo+'styles/paraiso-light.min.css',
        'pojoaque':repo+'styles/pojoaque.min.css',
        'qtcreator-dark':repo+'styles/qtcreator-dark.min.css',
        'qtcreator-light':repo+'styles/qtcreator-light.min.css',
        'railscasts':repo+'styles/base16/railscasts.min.css',
        'rainbow':repo+'styles/rainbow.min.css',
        'routeros':repo+'styles/routeros.min.css',
        'school-book':repo+'styles/school-book.min.css',
        'shades-of-purple':repo+'styles/shades-of-purple.min.css',
        'solarized-dark':repo+'styles/base16/solarized-dark.min.css',
        'solarized-light':repo+'styles/base16/solarized-light.min.css',
        'srcery':repo+'styles/srcery.min.css',
        'sunburst':repo+'styles/sunburst.min.css',
        'tomorrow':repo+'styles/base16/tomorrow.min.css',
        'tomorrow-night':repo+'styles/base16/tomorrow-night.min.css',
        'tomorrow-night-blue':repo+'styles/tomorrow-night-blue.min.css',
        'vs':repo+'styles/vs.min.css',
        'vs2015':repo+'styles/vs2015.min.css',
        'xcode':repo+'styles/xcode.min.css',
        'xt256':repo+'styles/xt256.min.css',
        'zenburn':repo+'styles/base16/zenburn.min.css',
    };
  var app = new Vue({
    el: '#js_app',
    data() {
      return {
        theme: {
          value: 'tomorrow-night-eighties',
          list: [
            'a11y-dark',
            'a11y-light',
            'agate',
            'androidstudio',
            'an-old-hope',
            'arduino-light',
            'arta',
            'ascetic',
            'atelier-cave-light',
            'atelier-dune-light',
            'atelier-estuary-light',
            'atelier-forest-light',
            'atelier-heath-light',
            'atelier-lakeside-light',
            'atelier-plateau-light',
            'atelier-savanna-light',
            'atelier-seaside-light',
            //'atelier-sulphurpool-dark',
            'atelier-sulphurpool-light',
            'atom-one-dark',
            'atom-one-dark-reasonable',
            'atom-one-light',
            'brown-paper',
            'codepen-embed',
            'color-brewer',
            'darcula',
            'dark',
            'default',
            'docco',
            'dracula',
            'far',
            'foundation',
            'github',
            'gml',
            'googlecode',
            'gradient-dark',
            'grayscale',
            'gruvbox-dark-hard',
            'gruvbox-dark-medium',
            'gruvbox-dark-pale',
            'gruvbox-dark-soft',
            'gruvbox-light-hard',
            'gruvbox-light-medium',
            'gruvbox-light-soft',
            'hopscotch',
            'hybrid',
            'idea',
            'ir-black',
            'isbl-editor-dark',
            'isbl-editor-light',
            'lightfair',
            'lioshi',
            'magula',
            'mono-blue',
            'monokai',
            'monokai-sublime',
            'night-owl',
            'nnfx-light',
            'nnfx-dark',
            'nord',
            'obsidian',
            'ocean',
            'paraiso-dark',
            'paraiso-light',
            'pojoaque',
            'qtcreator-dark',
            'qtcreator-light',
            'railscasts',
            'rainbow',
            'routeros',
            'school-book',
            'shades-of-purple',
            'solarized-dark',
            'solarized-light',
            'srcery',
            'sunburst',
            'tomorrow',
            'tomorrow-night',
            'tomorrow-night-blue',
            'vs',
            'vs2015',
            'xcode',
            'xt256',
            'zenburn'
          ]
        }
      }
    },
    computed: {
      cThemeList() {
        let list = {};
        let letterList = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
        letterList.forEach(letter => {
          this.theme.list.forEach(themeName => {
            if(new RegExp(`^${letter}{1}`).test(themeName)) {
              if(list[letter]) {
                list[letter].push(themeName);
              } else {
                list[letter] = [themeName];
              }
            }
          });
        });
        return list;
      },
        themeUrl(){
            var url = dict[this.theme.value];
            document.getElementById('theme-link').setAttribute('href', url);
            return url;
        }
    },
    methods: {
        //更换主题
        changeTheme(e){
            this.theme.value = e.target.value;
            var url = dict[this.theme.value];
            console.log(url)
            document.getElementById('theme-link').setAttribute('href', url);
        },
      // 动态加载link标签
      createLink() {
        if(location.search) {
          this.theme.value = location.search.replace('?theme=', '');
        }
        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = `${ dict[this.theme.value] }`;
        document.head.append(link);

        // 设置滚动条位置
        let offsetTop = $(`#${this.theme.value}`).offset().top;
        $('.zh-list').scrollTop(offsetTop - $(window).height() / 2.5);
      },
      // 切换主题
      switchTheme(themeName) {
        if(location.search) {
          location.href = location.href.replace(/(\?theme\=)(.*)$/, '$1'+themeName);
        } else {
          location.href = location.href + `?theme=${ themeName }`;
        }
      }
    },
    mounted() {
      // 初始化
      hljs.initHighlightingOnLoad();
      // 初始设置
        if(location.search) {
            this.theme.value = location.search.replace('?theme=', '');
            var url = dict[this.theme.value];
            document.getElementById('theme-link').setAttribute('href', url);
        }

    },

  });
</script>
</body>

</html>